<template>
    <view class="container">
        <view class="stats-header">
            <text class="title">心情分析</text>
            <text class="subtitle">了解自己的情绪变化</text>
        </view>

        <view class="stats-section">
            <text class="section-title">心情趋势</text>
            <view class="chart-container">
                <canvas 
                    canvas-id="mood-trend-chart" 
                    class="mood-trend-chart"
                    @touchstart="touchStart"
                    @touchmove="touchMove"
                    @touchend="touchEnd"
                ></canvas>
            </view>
        </view>

        <view class="stats-section">
            <text class="section-title">心情分布</text>
            <view class="chart-container">
                <canvas 
                    canvas-id="mood-distribution-chart" 
                    class="mood-distribution-chart"
                ></canvas>
            </view>
        </view>

        <view class="stats-section">
            <text class="section-title">常见标签</text>
            <view class="tag-cloud">
                <text 
                    v-for="tag in topTags" 
                    :key="tag.name"
                    class="tag-item"
                    :style="{ fontSize: (tag.weight * 20) + 'rpx' }"
                >
                    {{ tag.name }}
                </text>
            </view>
        </view>

        <view class="stats-section">
            <text class="section-title">统计摘要</text>
            <view class="summary-container">
                <view class="summary-item">
                    <text class="summary-label">记录总数</text>
                    <text class="summary-value">{{ totalRecords }}</text>
                </view>
                <view class="summary-item">
                    <text class="summary-label">平均心情</text>
                    <text class="summary-value">{{ averageMoodLevel }}</text>
                </view>
                <view class="summary-item">
                    <text class="summary-label">最常见标签</text>
                    <text class="summary-value">{{ mostCommonTag }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import * as echarts from '@/utils/echarts.min.js';
import moodApi from '@/api/mood';

export default {
    data() {
        return {
            moodTrendChart: null,
            moodDistributionChart: null,
            totalRecords: 0,
            averageMoodLevel: 0,
            mostCommonTag: '',
            topTags: [],
            moodTrendData: [],
            moodDistributionData: []
        }
    },
    onLoad() {
        this.fetchMoodStats();
    },
    onReady() {
        this.initCharts();
    },
    methods: {
        async fetchMoodStats() {
            try {
                const stats = await moodApi.getMoodStats();
                this.totalRecords = stats.totalRecords;
                this.averageMoodLevel = stats.averageMoodLevel.toFixed(1);
                this.mostCommonTag = stats.mostCommonTag;
                this.topTags = stats.topTags;
                this.moodTrendData = stats.moodTrendData;
                this.moodDistributionData = stats.moodDistributionData;

                this.updateCharts();
            } catch (error) {
                uni.showToast({
                    title: '加载统计数据失败',
                    icon: 'none'
                });
            }
        },
        initCharts() {
            // 初始化 mood trend chart
            this.moodTrendChart = echarts.init(
                this.$uGetRect('#mood-trend-chart')
            );

            // 初始化 mood distribution chart
            this.moodDistributionChart = echarts.init(
                this.$uGetRect('#mood-distribution-chart')
            );
        },
        updateCharts() {
            // 心情趋势图
            const trendOption = {
                title: { text: '心情趋势' },
                tooltip: { trigger: 'axis' },
                xAxis: {
                    type: 'category',
                    data: this.moodTrendData.map(item => item.date)
                },
                yAxis: {
                    type: 'value',
                    min: 1,
                    max: 5
                },
                series: [{
                    name: '心情等级',
                    type: 'line',
                    data: this.moodTrendData.map(item => item.moodLevel),
                    smooth: true
                }]
            };
            this.moodTrendChart.setOption(trendOption);

            // 心情分布图
            const distributionOption = {
                title: { text: '心情分布' },
                tooltip: { trigger: 'item' },
                series: [{
                    name: '心情分布',
                    type: 'pie',
                    radius: '50%',
                    data: this.moodDistributionData.map(item => ({
                        value: item.count,
                        name: item.label
                    }))
                }]
            };
            this.moodDistributionChart.setOption(distributionOption);
        },
        touchStart(e) {
            this.moodTrendChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: e.touches[0].x
            });
        },
        touchMove(e) {
            this.moodTrendChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: e.touches[0].x
            });
        },
        touchEnd() {
            this.moodTrendChart.dispatchAction({
                type: 'hideTip'
            });
        }
    }
}
</script>

<style scoped>
.container {
    background-color: #F8F8F8;
    padding: 20rpx;
}

.stats-header {
    text-align: center;
    margin-bottom: 40rpx;
}

.title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    display: block;
}

.subtitle {
    font-size: 24rpx;
    color: #666;
    display: block;
    margin-top: 10rpx;
}

.stats-section {
    background-color: white;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 20rpx;
}

.chart-container {
    width: 100%;
    height: 400rpx;
}

.mood-trend-chart,
.mood-distribution-chart {
    width: 100%;
    height: 100%;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tag-item {
    margin: 10rpx;
    color: #666;
    background-color: #f0f0f0;
    padding: 5rpx 10rpx;
    border-radius: 10rpx;
}

.summary-container {
    display: flex;
    justify-content: space-between;
}

.summary-item {
    flex: 1;
    text-align: center;
    background-color: #f0f0f0;
    padding: 20rpx;
    margin: 0 10rpx;
    border-radius: 10rpx;
}

.summary-label {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 10rpx;
}

.summary-value {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}
</style> 